<template>
    <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="clearInput"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="initList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="16">
          <el-button
            type="primary"
            @click="add()"
            style="float: right"
            >新增</el-button
          >
        </el-col>
      </el-row>

      <el-table :data="tabledata" style="width: 100%">
        <el-table-column label="标签" prop="label"> </el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.state == 1"
              >正常</el-tag
            >
            <el-tag type="danger" v-else>停用</el-tag>
          </template>
        </el-table-column>
        <!-- 操作区域 -->
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="edit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: #fa6962"
              icon="el-icon-delete"
              size="small"
              @click="removeById(scope.row.identity)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增 -->
    <el-dialog
      title="新增"
      :visible.sync="addVisible"
      width="50%"
      @close="addVisible=false"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="form"
        :rules="formRules"
        ref="formRef"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色id" prop="label">
          <el-input v-model="form.identity" :disabled="!isAdd"></el-input>
        </el-form-item>
        <el-form-item label="角色标签" prop="label">
          <el-input v-model="form.label"></el-input>
        </el-form-item>
        <el-form-item label="角色标识" prop="roleName">
          <el-input v-model="form.roleName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="form.state">
            <el-option label="正常" :value="1"></el-option>
            <el-option label="停用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限" prop="permissionList">
          <el-collapse>
           <el-collapse-item v-for="(item, index) in permissionData" :key="index" :title="item.name">
              <el-row v-if="flag">
                <el-checkbox-group v-model="form.checked">
                  <el-checkbox v-for="(item2, index2) in item.children" :key="index2" :label="item2.id" name="permissionList2" @change="val => handleCheckAllChange(val, item2)">{{item2.name}}</el-checkbox>
                </el-checkbox-group>
              </el-row>

           </el-collapse-item>
          </el-collapse>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { pageList, permissions, add, update, remove} from "#/Authority/role.js";
import { addLogs } from '#/Home/Home.js'
export default {
    name: 'AuthorityAssignment',
    meta: {
      title: '权限管理'
    },
    data() {
        return {
            flag: true,
            queryInfo: {
                query: "",
                pageNum: 1,
                pageSize: 5,
            },
            // 统计公告的总数量
            total: 0,
            addVisible: false,
            addClosed: false,
            isAdd: true,
            tabledata: [],
            permissionData: [],
            form: {
                identity: '',
                label: "",
                roleName: "",
                state: "",
                permissionList: [],
                permissionList2: [],
            },
            // 
            formRules: {
                content: [
                  { required: true, message: "请输入公告内容", trigger: "blur" },
                ],
            },
        }
    },
    created() {
        this.initList();
        this.initPermission();
    },
    methods: {
        async initList() {
            await pageList(this.queryInfo.pageNum, this.queryInfo.pageSize).then(res => {
                console.log(res);
                this.tabledata = res.data.roles.roles.content;
                this.total = res.data.roles.roles.totalElements;
            })
        },
        async initPermission(){
          await permissions().then(res => {
              this.permissionData = res.data.permissions;
              // console.log(this.permissionData);
          })
        },
        // 清除输入框的内容
        clearInput() {
            this.queryInfo.pageNum = 1;
            this.queryInfo.pageSize = 5;
            this.searchFlag = false;
        },
        add(){
          this.isAdd = true;
          this.form =  {
            identity: '',
            label: "",
            roleName: "",
            state: "",
            permissionList: [],
            checked: [],
          }
          this.addVisible = true;
        },
        edit(obj){
          this.isAdd = false;
          Object.assign(this.form, obj);
          this.form.checked = [];
          for(let i = 0; i < obj.permissionList.length; i++){
            this.form.checked.push(obj.permissionList[i].id);
          }
          console.log(this.form)
          this.addVisible = true;
        },
        async confirm(){
          if(this.isAdd){
            this.form.identity = parseInt(this.form.identity);
            await add(this.form).then(res => {
              // console.log(res);
              if(res.data.ret == 0){
                this.$message.success("添加成功");
                this.addVisible = false;

                addLogs({
                  userId: window.sessionStorage.getItem('userId'),
                  behavior: '新增了《' + this.form.roleName + '》角色',
                })
              }
              this.initList();
            });
          }else{
            this.form.permissionList = this.form.checked;
            // console.log(this.form)
            await update(this.form.identity, this.form).then(res => {
              if(res.data.ret == 0){
                this.$message.success("修改成功");
                this.initList();
                this.addVisible = false;

                addLogs({
                  userId: window.sessionStorage.getItem('userId'),
                  behavior: '修改了《' + this.form.roleName + '》角色',
                })
              } else {
                this.$message.error(res.data.msg)
              }
            });
          }
        },
        handleCheckAllChange(val, item) {
          this.flag = false;
          this.flag = true;
        },
        async removeById(id){
          await remove(id).then(res => {
              // console.log(res);
              if(res.data.ret == 0){
                this.$message.success("删除成功");
              }
              this.initList();
          });
        },
         // 每页的条目数改变
        handleSizeChange(newSize) {
            // console.log(newS)
            this.queryInfo.pageSize = newSize;
            this.initList();
        },
        // 页码改变
        handleCurrentChange(newPage) {
          //  console.log(newPage)
            this.queryInfo.pageNum = newPage;
            this.initList();
        },
    }
}
</script>

<style lang="less" scoped>

</style>





